<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <el-input style="width: 240px;margin-right: 10px" v-model="data.name" placeholder="请输入名字查询" prefix-icon="Search"></el-input>
      <el-button type="primary" @click="load">查 询</el-button>
      <el-button type="info" @click="reset">重 置</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-button type="success" @click="add">新 增</el-button>
<!--      <el-button type="danger" @click="delBatch">批量删除:{{ data.ids.length }}条</el-button>-->
      <!-- <el-button type="info">导 入</el-button>
      <el-button type="success">导 出</el-button> -->
    </div>
    <!-- 数据展示区 -->
    <div class="card" style="margin-bottom: 5px">
        <el-table :data="data.employeeList" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="username" label="账号"  />
            <el-table-column prop="name" label="姓名"  />
            <el-table-column prop="sex" label="性别" />
            <el-table-column prop="no" label="员工编号" />
            <el-table-column prop="role" label="角色"  />
            <el-table-column prop="departmentId" :formatter="formatPortName" label="部门"  width="100"/>
            <el-table-column label="操作" width="150">
              <template #default="scope">
                <el-button @click="update(scope.row)" type="primary" :icon="Edit" round />
                <el-button @click="del(scope.row.id)" type="danger" :icon="Delete" round />
              </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="load"
            @current-change="load"
            v-model:current-page="data.pageNum"
            v-model:page-size="data.pageSize"
            :page-sizes="[5,10,15,20]"
            background
            layout="total,sizes,prev,pager,next"
            :total="data.total"
  />
    </div>
    <!-- 弹窗 -->
    <el-dialog v-model="data.formVisible" title="员工信息" destroy-on-close width="500">
    <el-form ref="formRef" :rules="data.rules" :model="data.form">
      <el-form-item prop="username" label="账号" label-width="80px">
        <el-input v-model="data.form.username" autocomplete="off" placeholder="请输入账号"/>
      </el-form-item>
      <el-form-item prop="role" label="角色" label-width="80px">
      <el-select v-model="data.form.role" placeholder="请选择角色">
        <el-option label="admin" value="admin" />
      </el-select>
    </el-form-item>
      <el-form-item prop="name" label="姓名" label-width="80px">
        <el-input v-model="data.form.name" autocomplete="off" placeholder="请输入名字"/>
      </el-form-item>
      <el-form-item prop="no" label="员工编号" label-width="80px">
        <el-input v-model="data.form.no" autocomplete="off" placeholder="请输入工号"/>
      </el-form-item>
      <el-form-item prop="sex" label="性别" label-width="80px">
        <el-radio-group v-model="data.form.sex">
            <el-radio value="男" label="男"></el-radio>
            <el-radio value="女" label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="departmentId" label="部门" label-width="80px">
        <el-select v-model="data.form.departmentId" placeholder="请选择部门">
          <el-option v-for="item in data.orgList" :label="item.name" :value="item.id" />
        </el-select>
<!--        <el-input v-model="data.form.departmentId" autocomplete="off" placeholder="请输入部门编号"/>-->
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.formVisible=false">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import request from "@/utils/request.js";
import { ElMessage, ElMessageBox } from 'element-plus';
import {Delete,Edit} from '@element-plus/icons-vue';

const data = reactive({
  name:null,
  employeeList: [],
  orgList:[],
  pageNum:1,
  pageSize:10,
  total:0,
  formVisible:false,
  form: {},
  ids: [],
  rules: {
    username:[
      { required: true,message: '请填写账号',trigger: 'blur'}
    ],
    name:[
      { required: true,message: '请填写账号',trigger: 'blur'}
    ],
    role:[
      { required: true,message: '请填写账号',trigger: 'blur'}
    ],
    no:[
      { required: true,message: '请填写员工编号',trigger: 'blur'}
    ],
    sex:[
      { required: true,message: '请填写性别',trigger: 'blur'}
    ]

  }
})
// 显示
const load = () => {
    request.get("/employee/selectPage",{
        params: {
            pageNum:data.pageNum,
            pageSize:data.pageSize,
            name:data.name
        }
    }).then(res => {
        data.employeeList = res.data.list
        data.total = res.data.total
    })
  request.get("/organization/selectAll",{

  }).then(res => {
    data.orgList = res.data
  })


}
load()
// 重置
const reset = () => {
    data.name = null
    load()
}
// 添加
const add = () => {
    data.formVisible = true
    data.form = {}
}
// 更新
const update = (row) => {
  data.form = JSON.parse(JSON.stringify(row)) //深拷贝 一个新的对象用于编辑
  data.formVisible=true
}
// 表单校验
const formRef = ref()

const formatPortName = (row) => {
  const port = data.orgList.find(p => p.id === row.departmentId);
  return port ? port.name : '';
}
// 保存
const save = () => {
  formRef.value.validate((valid)=>{
    if (valid) {
      data.form.id ? updatepost() : addget()
    }
  })
}
// 添加(发生请求)
const addget = () => {
  request.post("/employee/insert", data.form).then(res => {
        if(res.code === '200'){
            data.formVisible=false
            ElMessage.success('添加成功')
            load()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
// 更新(发送请求)
const updatepost = () => {
  request.put("/employee/update", data.form).then(res => {
        if(res.code === '200'){
            data.formVisible=false
            ElMessage.success('更新成功')
            load()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
// 单个删除
const del = (id) => {
  ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗？','确定删除',{type:"warning"}).then(() => {
     request.delete("/employee/delete/" + id).then(res => {
        if(res.code === '200'){
            ElMessage.success('删除成功')
            load()
        } else {
            ElMessage.error(res.msg)
        }
     })
  }).catch()
}
// 批量选择
const handleSelectionChange = (rows) => {
  data.ids = rows.map(row => row.id)
}
// 批量删除
const delBatch = () => {
  if(data.ids.length === 0){
    ElMessage.warning('请选择要删除的数据')
    return
  }
  ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗？','确定删除',{type:"warning"}).then(() => {
     request.delete("/employee/deleteBatch",{ data:data.ids }).then(res => {
        if(res.code === '200'){
            ElMessage.success('删除成功')
            load()
        } else {
            ElMessage.error(res.msg)
        }
     })
  }).catch()
}
</script>
